<template>
	<view class="topupList">
		<view class="topBox">
			<view class="title" v-if="nickname">{{ nickname }}</view>
			<view class="textBox mTop2"><view class="text">请在下方选择参与的特惠充值活动</view></view>
		</view>

		<view class="list mTop4" v-if="PreferentialList">
			<view class="item" v-for="(item, index) in PreferentialList" @click="goTopup(item.set_id)">
				<view class="left"><image class="image" :src="item.set_img" mode="widthFix"></image></view>
				<view class="right">
					<view class="title">{{ item.set_name }}</view>
					<view class="money redText">￥{{ item.set_money }}</view>
					<!-- <view class="text"><mp-html :content="item.set_des" :tag-style="tagStyle"></mp-html></view> -->
				</view>
			</view>
		</view>
	</view>
</template>

<script>
var util = require('../../common/util.js');
export default {
	data() {
		return {
			PreferentialList: [],
			nickname: '',
			tagStyle: {
				p: `font-size: 28rpx;display: -webkit-box !important;`,
				
			}
		};
	},
	onLoad(e) {
		this.getPreferential(e.setting_parent_user);
	},
	methods: {
		getPreferential(setting_parent_user) {
			util.requestPost(
				'index/getPreferentialList',
				{ setting_parent_user: setting_parent_user },
				res => {
					if (res.code == 1) {
						console.log(res);
						this.PreferentialList = res.data.list;
						this.nickname = res.data.nickname;
					} else {
					}
				},
				err => {
					console.log(err);
				},
				{ isShowLoading: false }
			);
		},
		goTopup(set_id) {
			uni.navigateTo({
				url: `/pages/index/topup?set_id=${set_id}`
			});
		}
	}
};
</script>

<style scoped lang="scss">
.topupList {
	padding: 20rpx;
	.topBox {
		color: #ffffff;
		padding: 20rpx;
		text-align: center;
		border-radius: 20rpx;
		background: $btn-bg-color;
		.textBox {
			.text {
				font-size: 26rpx;
			}
		}
	}
	.list {
		.item {
			padding: 32rpx;
			border-radius: 20rpx;
			background-color: #ffffff;
			box-shadow: 0 0 12rpx rgba($color: #000000, $alpha: 0.2);
			display: flex;
			&:not(:last-of-type) {
				margin-bottom: 20rpx;
			}
			.left {
				.image {
					width: 160rpx;
				}
			}
			.right {
				flex: 1;
				font-size: 28rpx;
				margin-left: 30rpx;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				.title {
					color: $assist-color;
					display: -webkit-box!important;
					overflow: hidden;
					text-overflow: ellipsis;
					word-break: break-all;
					-webkit-line-clamp: 1;
					-webkit-box-orient: vertical!important;
				}
				.money {
					font-size: 28rpx;
				}
			}
		}
	}
}
</style>
